<template>
  <div style="margin-top: -60px;">
      <Top></Top>
      <Bordertitle>歌曲mv</Bordertitle>
      <div>
          <video :src="list" autoplay controls loop poster></video>
      </div>

      <div class="artist">
          <div class="artistName" >
              作者：{{this.narrate.artistName}}
          </div>
      </div>
      <div class="songname">歌名：{{this.narrate.name}}</div>
      <div class="time">发布日期：{{this.narrate.publishTime}}</div>
      <Bordertitle>歌曲简介</Bordertitle>
      <div class="intr" ref="nameif">
          {{this.narrate.desc}}
      </div>
      <div class="full" @click="clamp">
           完整歌手介绍
          <i class="arrow"></i>
      </div>
      <Bordertitle>精选评论</Bordertitle>
      <ul class="comment">
          <li v-for="m in comment" :key="m.id">
              <Comment :item="m"></Comment>
          </li>
      </ul>
  </div>
</template>



<script>
import Comment from "../components/Comment";
import Bordertitle from '../components/BorderTitle'
import Top from '../components/Top'


export default {
    components:{
        Top,
        Bordertitle,
        Comment

    },
    data(){
        return{
            listID:"",
            list:[],
            narrate:[],
            isPlay:false,
            comment:[]
        };
    },
    created() {

        this.listID=this.$route.params.id;
        this.$http.get("/mv/detail?mvid="+this.listID).then(data => {
            console.log("11",data)

            this.list=data.data.data.brs[3]
            this.narrate=data.data.data
        }).catch(error=>error)
        // this.getVideo()
        // this.getCommit()
        // this.$http.get("/mv/detail?mvid=10968017").then(data => {


        this.$http.get("/comment/mv?id="+this.listID).then((data)=>{
            console.log("22",data)
            this.comment=data.data.comments
        })
    },
    methods:{
        clamp(){
            if(this.isPlay){
                this.$refs.nameif.style.height="340px";
                this.isPlay=false;
            }else if (this.isPlay==false){
                this.$refs.nameif.style.height="100px";
                this.isPlay=true;
            }

        },
        // async getVideo(){
        //     const {data:res} = await this.$http.get("/mv/detail?mvid="+this.listID)
        //     alert("获取this.listID成功执行")
        //     this.list=res.data.brs[1080],
        //     this.narrate=res.data
        // },
        // async getCommit(){
        //   const {data:res} = await this.$http.get("/comment/mv?id="+this.listID)
        //     console.log("22",res.data)
        //     this.comment=res.data.comments
        // },

    }

}
</script>

<style lang="less" scoped>
.artist{
    display: flex;
    flex-direction: column;
    color: #666666;
    padding: 10px 10px 10px;
    .artistName,.songname,.time{
        margin-right: 10px;
    }
}
.intr{
    height: 100px;
    color: #666;
    background:#fff;
    padding: 0 16px 18px;
    overflow: hidden;
    /* 文本溢出使用省略号 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}
.full{
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 25px;
    .arrow{
        display: inline-block;
        position: relative;
        width: 9px;
        height: 9px;
        background:url("data:image/png");
        background-size: contain;
        background-repeat: no-repeat;
        left: 4px;
        top:0;
    }
}

</style>